<template>
  <div class="pageWrapper">
    <SearchBar @onSearch="handleSearch">
      <SearchBarItem label="清分批次号:" :labelLg="8">
        <Input type="text" v-model="dataModule.name" placeholder="请输入" clearable />
      </SearchBarItem>
      <SearchBarItem label="对账时间:" :labelLg="8">
        <DatePicker type="daterange" split-panels placeholder="请输入"></DatePicker>
      </SearchBarItem>
    </SearchBar>
    <RemoteTable :namespace="namespace" :columns="columns" @onSortChange="onSortChange">
    </RemoteTable>
  </div>
</template>

<script>
  import {
    Button,
    Input,
    Modal,
    Message,
    Col,
    Row,
    Form,
    FormItem,
    DatePicker,
    Select,
    Option,
  } from "view-design";
  import RemoteTable from "@/components/RemoteTable";
  import SearchBar from "@/components/SearchBar";
  import RemoteSelect from "@/components/RemoteSelect";
  import Action from "./Action"
  import {
    namespace
  } from "../module";
  import Authc from "@/components/Authc";
  import config from "@/utils/config";
  import appService from "@/utils/appService";
  export default {
    name: 'tables_page',
    components: {
      RemoteTable,
      SearchBar,
      SearchBarItem: SearchBar.SearchBarItem,
      RemoteSelect,
      Authc,
      Button,
      Action,
      Input,
      Modal,
      Message,
      Col,
      Row,
      Form,
      FormItem,
      DatePicker,
      Select,
      Option
    },
    data() {
      return {
        requireUrl: '',
        namespace: namespace,
        isClear: true,
        loading: true,
        dataModule: {

        },
        tableData: [],
        columns: [{
            type: 'index',
            width: 60,
            align: 'center'
          }, {
            title: '清分批号',
            key: 'name',
          },
          {
            title: '清分执行时间',
            key: 'email',
          },
          {
            title: '商户编号',
            key: 'createTime',
          }, {
            title: '商户名称',
            key: 'name',
          },
          {
            title: '原始清分金额',
            key: 'email',
          },
          {
            title: '付款方账户',
            key: 'createTime',
          },
          {
            title: '付款方账户名称',
            key: 'email',
          },
          {
            title: '收款方账户',
            key: 'createTime',
          }, {
            title: '收款方账户名称',
            key: 'name',
          },
          {
            title: '对账时间',
            key: 'email',
          },
          {
            title: '对账状态',
            key: 'createTime',
          },
          {
            title: '对账结果',
            key: 'createTime',
          },
          {
            title: '对账文件名',
            key: 'createTime',
          },
          {
            title: '创建时间',
            key: 'createTime',
          },
          {
            title: '备注',
            key: 'createTime',
          },

        ],
      }
    },
    methods: {
      handleSearch() {
        this.$store.dispatch(`${namespace}/query`, {
          limit: {
            currentPage: 1
          }
        });
      },
      onSortChange(sort) {
        if (sort.order === "normal") {
          this.queryParam.order = [];
        } else {
          this.queryParam.order = [sort.key + " " + sort.order];
        }
        this.handleSearch();
      },
      onSortChange(sort) {
        if (sort.order === "normal") {
          this.queryParam.order = [];
        } else {
          this.queryParam.order = [sort.key + " " + sort.order];
        }
        this.handleSearch();
      }
    },
    async mounted() {

    }
  }
</script>

<style>

</style>
